<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户信息</title>
		<!--引入layui的css  -->
		<link rel="stylesheet" href="./layui/css/layui.css" media="all">
	</head>
	<!--引入layui的js  -->
	<script src="./layui/layui.js" charset="utf-8"></script>
	<!--引入jquery的js  -->
	<script src="./js/jquery-2.1.1.min.js" charset="utf-8"></script>
	<script src="js/global.js" charset="utf-8"></script>
	<body>
		<!-- 查询条件输入框 -->
		<div class="layui-form-item" style="margin-top: 10px;">
			<form class="layui-form" onsubmit="return false;">
				<label class="layui-form-mid">名称:</label>
				<div class="layui-input-inline" style="width: 120px;">
					<input type="text" id="loginName" name="loginName" autocomplete="off" class="layui-input">
				</div>

				<label class="layui-form-mid">时间:</label>
				<div class="layui-input-inline" style="width: 120px;">
					<input type="text" id="begintime" name="begintime" placeholder="yyyy-MM-dd" autocomplete="off"
						class="layui-input">
				</div>
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width: 120px;">
					<input type="text" id="endtime" name="endtime" placeholder="yyyy-MM-dd" autocomplete="off"
						class="layui-input">
				</div>

				<label class="layui-form-label">是否锁定</label>
				<div class="layui-input-inline">
					<select name="isLockout" autocomplete="off">
						<option value="">---请选择</option>
						<option value="0">未锁定</option>
						<option value="1">已锁定</option>
					</select>
				</div>

				<label class="layui-form-mid">排序:</label>
				<div class="layui-input-inline" style="width: 200px;">
					<select id="pType" name="time">
						<option value="">请选择</option>
						<option value="createTime">创建时间</option>
						<option value="lastLoginTime">最后登录时间</option>
					</select>
				</div>

				<div class="layui-input-inline" style="width: 300px;">
					<button class="layui-btn" lay-submit="" lay-filter="search" id="search" data-type="reload"><i
							class="layui-icon">&#xe615;</i>搜索</button>
					<button class="layui-btn layui-btn-normal" type="reset"><i class="layui-icon">&#xe666;</i>重置</button>
				</div>
			</form>
		</div>

		<!--树形的弹层页面  -->
		<div id="diaSetRight" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="editRoleForm" id="editRoleForm" action="">
				<div id="test1" class="demo-transfer"></div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-filter="addRightSubmit" lay-submit=""><i
							class="layui-icon">&#xe605;</i>保存</button>
				</div>
			</form>
		</div>

		<!--穿梭框的弹层页面  -->
		<div id="editRoleLayer" style="display: none; margin-top: 20px;">
			<div id="testTransfer" class="demo-transfer"></div>
		</div>

		<!-- 修改的弹层页面  -->
		<div id="editLayer" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="editForm" id="editForm" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">登录名:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="loginName" name="loginName" class="layui-input" disabled="disabled">
						<input type="hidden" id="id" name="id" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密保邮箱:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="protectEMail" lay-verify="email"  name="protectEMail" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密保手机号:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="protectMTel" lay-verify="phone" name="protectMTel" class="layui-input">
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-filter="editSubmit" lay-submit="">修改提交</button>
				</div>
			</form>
		</div>


		<!-- 新增的弹层页面  -->
		<div id="addLayer" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="addForm" id="addForm" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">登录名:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="loginName" name="loginName" class="layui-input" lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="password" id="password" name="password" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密保邮箱:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="protectEMail" lay-verify="email" name="protectEMail" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密保手机号:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="protectMTel" lay-verify="phone" name="protectMTel" class="layui-input">
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-filter="addSubmit" lay-submit="">新增提交</button>
				</div>
			</form>
		</div>






		<!--定义数据表格table  -->
		<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>

		<!--表格数据里的编辑、查看等操作按钮  -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs layui-btn-primary ops" ops="user:setRole" lay-event="editRole"><i
					class="layui-icon">&#xe658;</i>角色</a>
			<a class="layui-btn layui-btn-xs layui-btn-primary ops" ops="user:edit" lay-event="edit"><i
					class="layui-icon">&#xe642;</i>编辑</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger ops" ops="user:del" lay-event="del"><i
					class="layui-icon">&#xe640;</i>删除</a>
			<a class="layui-btn layui-btn-xs layui-btn-primary ops" ops="user:czmm" lay-event="editPassword"><i
					class="layui-icon">&#xe642;</i>密码重置</a>
					
		</script>

		<!--表格工具栏的新增、批量等按钮  -->
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm layui-btn-normal ops" ops="user:add" lay-event="add"><i
						class="layui-icon">&#xe654;</i>添加</button>
				<!-- <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delAll"><i class="layui-icon">&#xe640;</i>批量刪除</button> -->
			</div>
		</script>

		<!-- 开关1（既能开也能关） -->
		<script type="text/html" id="switchLockout">
			<input type="checkbox" data-id="{{d.id}}" name="isLockout" lay-filter="isLockout" lay-skin="switch"
				lay-text="已锁定|未锁定" {{d.isLockout=="1" ? "checked":""}}>
		</script>




		<script>
			layui.use(['laydate', 'layer', 'form', 'table', 'tree', 'upload', 'transfer'], function() {
				var laydate = layui.laydate //日期组件
					,
					layer = layui.layer //弹层组件
					,
					form = layui.form //表单组件
					,
					upload = layui.upload //上传组件
					,
					tree = layui.tree //树形结构组件
					,
					$ = layui.jquery //jQuery
					,
					table = layui.table //表格组件
					,
					transfer = layui.transfer; //穿梭框组件

				//日期控件
				laydate.render({
					elem: '#begintime'
				});
				laydate.render({
					elem: '#endtime'
				});

				//获取分类，填充下拉选框的数据
				/* $(function() {
					$.ajax({
						type: 'get',				//提交方式 get或者post
						url: '',					//提交url
						dataType: 'json', 			//返回数据的格式
						success: function(data) {	//成功返回之后的调用
							$.each(data, function(index, item) {
								//填充下拉列表
								$('#pType').append(new Option(item.name, item.id)); 
							});
							layui.form.render("select");
						},
						error: function() {
							alert("获取失败！！！")
						}
					});
				}) */

				//渲染表格，填充数据
				table.render({
					elem: '#proTable', //对应上面定义的表格ID
					url: globalData.server + 'user/findByUsers/', //提交到后台的地址
					headers:{token:globalData.token},
					method: 'get', //提交方式 get或者post
					even: true, //表格隔行变色
					page: true, //开启分页
					toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
					title: '产品表', //表格名称
					cols: [
						[{
							field: 'id', //对应实体类里的属性    （必需有）
							fixed: 'left', //固定方式，left左固定，right右固定 （可选）
							align: 'center', //排列方式：left左对齐，center居中，right右对齐（可选）
							width: 80, //单元格宽度（可选）	
							title: '编号', //表头名称			（必需有）
							sort: true //开启排序（可选）
						}, {
							field: 'loginName', //对应实体类里的属性
							width: 150, //单元格宽度	
							title: '登录名称' //表头名称
						}, {
							field: 'password',
							width: 120,
							title: '密码',
						}, {
							field: 'isLockout',
							title: '是否锁定',
							width: 130,
							toolbar: '#switchLockout'
						}, {
							field: 'createTime',
							title: '账户创建时间',
							width: 180,
						}, {
							field: 'lastLoginTime',
							title: '最后登录时间',
							width: 180,
						}, {
							field: 'lockTime',
							title: '被锁定时间',
							width: 180,
						}, {
							field: 'protectEMail',
							title: '密保邮箱',
							width: 100,
						}, {
							field: 'protectMTel',
							title: '密保手机号',
							width: 100,
						}, {
							fixed: 'right',
							width: 350,
							title: '操作',
							toolbar: '#barDemo'
						}]
					],
					done: function(res, curr, count){
						var myOps = sessionStorage.getItem("buttonPermission");
						$(".ops").each(function(){
							if(myOps.indexOf($(this).attr('ops'))==-1){
								$(this).hide();
							}
						});
					}
				});

				// 处理开关点击时把信息传入到后台进行修改（isLockSwitch写对应开关的lay-filter值即可）
				form.on('switch(isLockout)', function(data) {
					var id = $(this).attr('data-id'); //获得当前点击对象的id值
					var valid = this.checked ? 'on' : 'off'; //获取到点击后的开关状态（on/off）
					var x = data.elem.checked; //获取到点击后的开关状态（true/false）
					layer.open({
						content: '确定要修改状态吗？' //给用户的友好提示
							,
						btn: ['确定', '取消'],
						yes: function(index, layero) {
							data.elem.checked = x;
							layer.close(index);
							$.ajax({
								type: "POST",
								url: globalData.server + 'user/editcheck/', //提交到后台的地址
								data: {
									"id": id,
									"valid": valid,
									//token: globalData.token
								},
								headers:{token:globalData.token},
								success: function(res) { //提交成功
									layer.closeAll(); //关闭弹层
									layer.alert(res.msg); //提示信息
									table.reload('proTable'); // 修改后要刷新表格
								},
								error: function() {}
							});
						},
						btn2: function(index, layero) {
							//按钮【按钮二】的回调
							data.elem.checked = !x;
							form.render();
							layer.close(index);
							//return false 开启该代码可禁止点击该按钮关闭
						},
						cancel: function() {
							//右上角关闭回调
							data.elem.checked = !x;
							form.render();
							//return false 开启该代码可禁止点击该按钮关闭
						}
					});
					form.render();
					return false;
				});

				/*
					条件查询	submit 对应 lay-submit  search 对应 lay-filter
				*/
				form.on('submit(search)', function(data) {
					var field = data.field; //获取所有的输入条件值
					//执行重载
					table.reload('proTable', {
						page: {
							curr: 1
						}, // 重载后回到第一页
						where: field // 把所有的输入值传给后台
					});
				});

				//表格头部工具栏事件
				table.on('toolbar(filterTable)', function(obj) {
					switch (obj.event) {
						//新增按钮
						case 'add':
							//清空新增页面的表单内容，防止上次输入的数据还在
							$("#addForm")[0].reset();
							//打开新增的弹层
							layer.open({
								type: 1,
								title: '您正在新增产品信息',
								content: $('#addLayer'),
								area: ['80%', '80%']
							});
							break;
							//批量删除按钮
						case 'delAll':
							//获取选中的数据
			 			var checkStatus = table.checkStatus('proTable');
							var ids = [];
							for (var i = 0; i < checkStatus.data.length; i++) {
								ids.push(checkStatus.data[i].id)
							}
							if (ids.length == 0) {
								alert("请选择需要删除的产品");
								return;
			 			}
			 			//拼接id(把数组转成字符串，并且用逗号拼接),比如ids=[2,5,6]，那么id='2,5,6'
							var id = ids.join(',');
							if (confirm("确定全部删除吗？")) {
								$.ajax({
									type: 'post', //提交方式get或post
									url: '', //提交路径
									data: {
										'ids': id
									}, //参数
									dataType: 'json', //返回的数据类型
									success: function(res) { //提交成功
										layer.alert(res.msg);
										table.reload('proTable');
									},
									error: function() { //提交失败
										alert("系统异常！！")
									}
								});
							}

							break;
					};
				});

				//数据表格里的事件监听
				table.on('tool(filterTable)', function(obj) {
					var data = obj.data; //获取当前行的数据

					switch (obj.event) {
						case 'editRole': //穿梭框组件
							//获取穿梭框左边数据
							$.ajax({
								type: 'get',
								url: globalData.server + "roles/selectRoles",
								headers:{token:globalData.token},
								dataType: 'json',
								success: function(res) {
									var zuo = res;

									//获取穿梭框右边数据
									var you = new Array();
									$.ajax({
										type: 'post',
										url: globalData.server +
											"userroles/selectUserrolesById",
										data: {
											"uid": data.id
										},
										headers:{token:globalData.token},
										dataType: 'json',
										success: function(res) {
											//if(res.count > 0) {
											for (var i = 0; i < res.length; i++) {
												you.push(res[i].id);
											}
											//}

											//渲染穿梭框
											transfer.render({
												elem: '#testTransfer',
												title: ['系统所有角色', '当前用户的角色'],
												data: zuo,
												value: you,
												parseData: function(udata) {
													return {
														"value": udata
														.id, //数据值
														"title": udata
															.name //数据标题
													}
												},
												onchange: function(obj, index) {
													if (index == "0") {
														//新增用户角色
														for (var i = 0; i <
															obj.length; i++
															) {
															$.ajax({
																type: "post",
																url: globalData
																	.server +
																	"userroles/addUserroles",
																data: {
																	"userId": data
																		.id,
																	"roleId": obj[
																			i
																			]
																		.value
																},
																headers:{token:globalData.token},
																dataType: 'json',
																success: function(res) { //提交成功
																if (res) {layer.msg("设置角色成功！", {icon: 1})}
															},
																error: function() { //提交失败
																	alert("系统异常！！")
																}
															});
														}

													} else {
														//删除用户角色
														for (var i = 0; i <
															obj.length; i++
															) {
															$.ajax({
																type: "post",
																url: globalData.server +"userroles/deleteUserrolesById",
																data: {
																	"userId": data.id,
																	"roleId": obj[i].value,
																},
																headers:{token:globalData.token},
																dataType: 'json',
																success: function(res) { //提交成功
																    if(res.code==0){
																    }else {
																        layer.alert(res.msg);
																        table.reload('proTable');
																    }
																},
																error: function() { //提交失败
																	alert("系统异常！！")
																}
															});
														}

													}
												}
											});
										},
										error: function() {
											alert("获取失败！！！")
										}
									});
								},
								error: function() {
									alert("获取失败！！！")
								}
							});

							//打开穿梭框弹层
							layer.open({
								type: 1,
								title: '您正在设置用户[' + data.loginName + ']的角色',
								content: $("#editRoleLayer"),
								area: ['500px', '400px'],
								fixed: false, //不固定
								maxmin: true,
								offset: '10px'
							});

							break;
						case 'edit': //修改操作

							//数据的回显
							form.val("editForm", data);
							//打开弹层
							layer.open({
								type: 1,
								title: '您正在修改编号【' + data.id + '】的信息',
								content: $('#editLayer'),
								area: ['800px', '600px']
							});

							break;
						case 'detail': //查看操作
				 		//数据的回显
							form.val("detailForm", data);
							//打开弹层
							layer.open({
								type: 1,
								title: '您正在查看编号【' + data.id + '】的信息',
								content: $('#detailLayer'),
								area: ['800px', '600px']
							});
							break;
						case 'del': //删除操作
							if (confirm("确定删除吗？")) {
								$.ajax({
									type: 'delete', //提交方式get或post
									url: globalData.server + 'user/' + data.id /* + "?" + "token=" +
										globalData.token */, //提交路径
									headers:{token:globalData.token},
									dataType: 'json', //返回的数据类型
									success: function(res) { //提交成功
										layer.alert(res.msg); //提示信息
										table.reload('proTable'); // 修改后要刷新表格
									},
									error: function() { //提交失败
										alert("该用户下有角色或者模块关联，不能删除！")
									}
								});
							}
							break;

						case 'editPassword': //重置密码
							if (confirm("确定重置密码吗？")) {
								$.ajax({
									type: 'post', //提交方式get或post
									url: globalData.server + 'user/updatePasswordById', /* + "?" + "token=" +
										globalData.token, //提交路径 */
									data: {
										"id": data.id
									}, //参数 //请求路径	 					//提交路径
									headers:{token:globalData.token},
									dataType: 'json', //返回的数据类型
									success: function(res) { //提交成功
										layer.alert(res.msg); //提示信息
										table.reload('proTable'); // 修改后要刷新表格
									},
									error: function() { //提交失败
										alert("系统异常！！")
									}
								});
							}



							break;
						case 'editImg': //图片管理操作
							//数据的回显
							form.val("imgForm", data);
							//打开弹层
							layer.open({
								type: 1,
								title: '您正在操作编号【' + data.id + '】的图片信息',
								content: $('#imgUploadLayer'),
								area: ['700px', '600px']
							});

							break;
					};
				})

				//修改弹层的提交按钮
				form.on('submit(editSubmit)', function(data) {
					$.ajax({
						type: 'post', //提交方式get或post
						url: globalData.server + 'user/updateById', //提交路径
						data: $("#editForm").serialize()/* + "&token=" + globalData.token */, //参数
						headers:{token:globalData.token},
						dataType: 'json', //返回的数据类型
						success: function(res) { //提交成功
							layer.closeAll(); //关闭弹层
							layer.alert(res.msg); //提示信息
							table.reload('proTable'); //刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});
					return false;
				});

				//新增弹层的提交按钮
				form.on('submit(addSubmit)', function(data) {
					$.ajax({
						type: 'post', //提交方式get或post
						url: globalData.server + 'user/insertUsers', //提交路径
						data: $("#addForm").serialize()/* + "&token=" + globalData.token */, //参数
						headers:{token:globalData.token},
						dataType: 'json', //返回的数据类型
						success: function(res) { //提交成功
							layer.closeAll(); //关闭弹层
							layer.alert(res.msg); //提示信息
							table.reload('proTable'); // 修改后要刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});

					return false;
				});



				//主图片上传
				var uploadInst1 = upload.render({
					elem: '#maintu',
					url: 'uploadImg.do',
					accept: 'images',
					size: 50000,
					before: function(obj) {
						//预读本地文件
						obj.preview(function(index, file, result) {
							$('#demo1').attr('src', result);
						});
					},
					done: function(res) {
						//如果上传失败
						if (res.code > 0) {
							return layer.msg('上传失败');
						}

						//上传成功
						var demoText = $('#demoText1');
						demoText.html('<span style="color: #4cae4c;">上传成功</span>');
						//图片url填写
						var fileupload = $("#mainImgUrl");
						fileupload.attr("value", res.data);
					},
					error: function() {
						//演示失败状态，并实现重传
						var demoText = $('#demoText1');
						demoText.html(
							'<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
							);
						demoText.find('.demo-reload').on('click', function() {
							uploadInst1.upload();
						});
					}
		 	});
				//副图片上传
				var uploadInst2 = upload.render({
					elem: '#futu',
					url: 'uploadImg.do',
					accept: 'images',
					size: 50000,
					before: function(obj) {
						//预读本地文件
						obj.preview(function(index, file, result) {
							$('#demo2').attr('src', result);
						});
					},
					done: function(res) {
						//如果上传失败
						if (res.code > 0) {
							return layer.msg('上传失败');
						}

						//上传成功
						var demoText = $('#demoText2');
						demoText.html('<span style="color: #4cae4c;">上传成功</span>');
						//图片url填写
						var fileupload = $("#futuImgUrl");
						fileupload.attr("value", res.data);
					},
					error: function() {
						//演示失败状态，并实现重传
						var demoText = $('#demoText2');
						demoText.html(
							'<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
							);
						demoText.find('.demo-reload').on('click', function() {
							uploadInst2.upload();
						});
					}
				});

				//图片上传的提交按钮
				form.on('submit(imgSubmit)', function(data) {
					console.log($("#imgForm").serialize());
					$.ajax({
						type: 'post', //提交方式get或post
						url: '', //提交路径
						data: $("#imgForm").serialize(), //参数
						dataType: 'json', //返回的数据类型
						success: function(res) { //提交成功
							layer.closeAll(); //关闭弹层
							layer.alert(res.msg); //提示信息
							table.reload('proTable'); //刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});
					return false;
				});


			});
		</script>
	</body>
</html>
